<template>
  <div>
    <div>
<!--      新建用户弹窗开始-->
      <el-button type="primary" @click="dialogFormVisible=true">+ 新建</el-button>
<!--      搜索框-->
      <el-select v-model="searchByRole" placeholder="选择角色">
        <el-option
          v-for="item in roleList"
          :key="item.lxRoleName"
          :label="item.lxRoleName"
          :value="item.id">
        </el-option>
      </el-select>
      <el-input
        style="width: 220px;margin-left: 20px"
        placeholder="请输入学号/工号"
        v-model="searchByNumber"
        prefix-icon="el-icon-search"
        type="number"
        clearable>
      </el-input>
      <el-button type="primary" plain @click="searchBtnClick">查询</el-button>
      <el-button type="success" plain @click="searchResetBtnClick">重置</el-button>
<!--新建用户弹窗开始-->
      <el-dialog title="新建用户" :visible.sync="dialogFormVisible"  :close-on-click-modal='false' :show-close="false">
        <el-form :model="userform" :rules="rules" ref="userform" >
          <el-form-item label="学号" :label-width="formLabelWidth" prop="lxUserNumber">
            <el-input v-model="userform.lxUserNumber" autocomplete="off"style="width: 30%"></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth" prop="lxUsername">
            <el-input v-model="userform.lxUsername" autocomplete="off"  style="width: 30%"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="lxUserPassword" :label-width="formLabelWidth">
            <el-input type="password" v-model="userform.lxUserPassword" autocomplete="off" style="width: 30%"></el-input>
          </el-form-item>
<!--          <el-form-item label="确认密码" prop="lxCheckPass" :label-width="formLabelWidth">-->
<!--            <el-input type="password" v-model="userform.lxCheckPass" autocomplete="off" style="width: 30%"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="性别" :label-width="formLabelWidth" prop="lxUserSex">
<!--            <el-input v-model="userform.lxUserSex" autocomplete="off" style="width: 30%"></el-input>-->
            <el-select v-model="userform.lxUserSex" placeholder="请选择性别">
<!--              <el-option v-for="item in gender" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth" prop="lxUserPhone">
            <el-input v-model="userform.lxUserPhone" autocomplete="off" style="width: 30%"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="lxUserEmail">
            <el-input v-model="userform.lxUserEmail" autocomplete="off" style="width: 30%"></el-input>
          </el-form-item>
          <el-form-item label="角色" :label-width="formLabelWidth" prop="lxRoleId">
            <el-select v-model="userform.lxRoleId" placeholder="请选择角色">
<!--              <el-option label="区域一" value="shanghai"></el-option>-->
<!--              <el-option label="区域二" value="beijing"></el-option>-->
              <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.lxRoleName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('userform')">取 消</el-button>
          <el-button type="primary" @click="submitForm('userform')">确 定</el-button>
        </div>
      </el-dialog>
<!--      新建用户弹窗end-->



    </div>
    <div style="margin: 20px 0;"></div>
<!--user-->
    <el-table
      ref="multipleTable"
      border
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">

      </el-table-column>
      <el-table-column
        prop="date"
        label="序号"
        width="80">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column
        prop="lxUserNumber"
        label="账号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="lxUsername"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="lxUserSex"
        label="性别">
        <template slot-scope="scope">
          <el-tag   v-if="scope.row.lxUserSex==1">男</el-tag>
          <el-tag type="danger"  v-if="scope.row.lxUserSex==2">女</el-tag>

        </template>
      </el-table-column>
      <el-table-column
        prop="lxUserPhone"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="lxUserEmail"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="lxRoleId"
        label="角色">
<!--        <template slot-scope="scope">-->
<!--          <el-tag   v-if="scope.row.lxUserSex==1">男</el-tag>-->
<!--          <el-tag   v-if="scope.row.lxUserSex==2">女</el-tag>-->

<!--        </template>-->
      </el-table-column>

      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">

            <el-button @click="updateClick(scope.row)"  size="small" :disabled="scope.row.lxRoleId=='管理员'">编辑</el-button>
            <el-button type="danger" @click="deleteClick(scope.row)" size="small" :disabled="scope.row.lxRoleId=='管理员'">删除</el-button>


<!--          <el-button @click="updateClick(scope.row)"  size="small">编辑</el-button>-->

<!--          <el-button type="danger" @click="deleteClick(scope.row)" size="small">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom" style="margin-bottom: 0;margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[8, 10, 20, 40]"
        :page-size="pagesize"
        :background='true'
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" class="pageControl">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: "UserIndex",
  data() {
    return {
      //角色列表
      currentPage:1,
      pagesize:8,
      total:0,
      pageNum:1,
      searchByRole:'',
      searchByNumber:'',
      search:false,

      roleList:[
      //   {
      //   id:"",
      //   lxRoleType: "1",
      //   lxRoleName: "管理员",
      //   lxRoleDetail: "管理员",
      //   lxRoleStatus: 1
      // }
      ],

      value: '',
      input: '',
      //user列表
      tableData: [{
        lxUserNumber: '2016-05-02',
        lxUsername: '王小虎',
        province: '上海',
        lxUserSex: '普陀区',
        lxUserPhone: '上海市普陀区金沙江路 1518 弄',
        lxUserEmail: 200333,
        lxRoleId: 200333
      }],
      dialogFormVisible: false,
      userform: { //用于添加用户
        id:"",
        lxUserNumber: '',
        lxUsername: '',
        lxUserPassword: '',
        lxUserSex: '',
        lxUserPhone:"",
        lxUserEmail:"",
        lxRoleId:"",
        lxCheckPass:"",
      },
      userformInit: { //初始化
        id:"",
        lxUserNumber: '',
        lxUsername: '',
        lxUserPassword: '',
        lxUserSex: '',
        lxUserPhone:"",
        lxUserEmail:"",
        lxRoleId:"",
        lxCheckPass:"",
      },
      formLabelWidth: '120px',
      //新增用户表单验证规则
      rules: {
        lxUserPassword: [
          {required: true, message: '请填写密码', trigger: 'blur' }
        ],
        // lxCheckPass: [
        //   {required: true, message: '请再次填写密码', trigger: 'blur' }
        // ],
        // lxUserPhone: [
        //   {required: true, message: '请填写电话', trigger: 'blur' }
        // ],
        lxUsername: [
          { required: true, message: '请填写姓名', trigger: 'blur' }
        ],
        lxUserNumber: [
          { required: true, message: '请填写学号', trigger: 'blur' }
        ],
        lxRoleId: [
          { required: true, message: '请选择角色', trigger: 'blur' }
        ]
      },
      gender: [{
        value: '1',
        label: '男'
      }, {
        value: '2',
        label: '女'
      }],

    }
    //return 外面



  },
  mounted() {
    this.load();
  },

  methods: {
    load(){

      this.$http.post('/userrole/index').then(res=>{
        this.roleList=res.data.data;
        console.log("res",res)
        console.log("this.roleList",this.roleList)
      });
      if(this.search){
        console.log("queryBykey")
        this.searchBtnClick()
      }else {
        console.log("queryAll")
        this.$http.get('/user/indexByPage',{params:{currentPage:this.currentPage,pagesize:this.pagesize}}).then(res=>{
          console.log("this.currentPage",this.currentPage)
          this.tableData=res.data.data.records;
          this.total=res.data.data.total;
          this.pageNum=res.data.data.pageNum;
          console.log("this.tableData",res)
          console.log("this.tableData",this.tableData)
          this.roleformat();
        });
      }



    },
    handleSizeChange:function(size){
      //选择 一页展示多少数据时 调用的方法
      this.pagesize = size;
      console.log(size+"****");
      this.currentPage=1
      this.load()
    },
    handleCurrentChange:function(currentPage){
      //点击页面项 的函数响应
      this.currentPage = currentPage;
      console.log("this.currentPage = currentPage;",this.currentPage)
      this.load()
    },
    searchBtnClick(){ //根据条件查询
      console.log("searchBtnClisk",this.searchByRole,this.searchByNumber)
      // this.currentPage=1;
      this.search=true;
      if (this.searchByNumber!=''){
        console.log("searchBtnClisk searchByName")
        this.$http.post('/user/queryByNumber',this.searchByNumber).then(res => {
          this.tableData=[]
          if (res.data.data==null){
            this.total=this.tableData.length
          }else {
            this.tableData.push(res.data.data)
            this.roleformat();
            this.total=this.tableData.length
          }
          console.log("res", res)
          console.log("this.tableData", this.tableData)
        });

      }else if(this.searchByRole!=null&&this.searchByRole!=''&&this.searchByNumber==''){
        console.log("searchBtnClisk searchByClass")
        this.$http.get('/user/queryByRolePage',{params:{currentPage:this.currentPage,pagesize:this.pagesize,id:this.searchByRole}}).then(res => {
          this.tableData=res.data.data.records;
          this.roleformat();
          this.total=res.data.data.total;
          this.pageNum=res.data.data.pageNum;
          console.log("res", res)
          console.log("this.userWechatList", this.tableData)
        });
      }else{
        console.log("searchBtnClisk is null")
      }

    },searchResetBtnClick(){  //重置搜索条件
      this.searchByNumber=''
      this.searchByRole='';
      this.search=false
      this.currentPage=1
      this.load()
    },
    openDialog(userform){ //打开弹窗
      this.dialogFormVisible=true;
      this.$refs[userform].resetFields();
    },
    //提交表单
    submitForm(userform) {
      this.$refs[userform].validate((valid) => {
        if (valid) {
          console.log("userform",this.userform);
        if (this.userform!=null){
          //判断是否为更新操作
          if (this.userform.id==null||this.userform.id==""){  //此处id为空，为新增操作
            console.log("this.userform.id==null||this.userform.id==\"\"",this.userform)
            this.$http.post('/user/insert',this.userform).then(res=>{
              console.log("res",res)
              if (res.data.state==200){
                this.$refs[userform].resetFields();
                this.open("添加用户","添加成功")
              }else {
                this.$refs[userform].resetFields();
                this.open("添加用户",res.data.message)
              }

            });
          }else { //此处id不为空，为更新操作
            console.log("userform!=null",this.userform)
            this.$http.post('/user/update',this.userform).then(res=>{
              console.log("res",res)
              if (res.data.state==200){
                this.$refs[userform].resetFields();
                this.open("编辑用户","修改成功")
              }

            });
          }

          }

        }
        else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(userform) {
      console.log("userformInit",this.userformInit)

      this.userform={...this.userformInit}
      console.log("resetForm",this.userform)
      this.$refs[userform].resetFields();
       this.dialogFormVisible=false;
    },
    handleClose(){
      console.log("handleClose")
      this.$nextTick(() => {
        this.$refs.userform.resetFields() // CheckedArr 一个选中的数组element Ui的东西，关键是看$nextTick的用法
      })

    },
    open(title,message) {
      this.$alert(message, title, {
        confirmButtonText: '确定',
        callback: action => {
          this.load();
          this.dialogFormVisible=false;
          // this.$message({
          //   type: 'info',
          //   message: `action: ${ action }`
          // });
        }
      });
    },
    roleformat(){ //用于转换角色
      for (var i=0;i<this.tableData.length;i++){
        for (var j=0;j<this.roleList.length;j++){
          if (this.roleList[j].id==this.tableData[i].lxRoleId)
            this.tableData[i].lxRoleId=this.roleList[j].lxRoleName
        }
      }
      console.log("this.tableData format",this.tableData)
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);

        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    updateClick(row) {
      console.log(row);
      this.userform= {...row};
      console.log("updateClick",this.userform);


      this.dialogFormVisible=true;

    },
    deleteClick(row){ //删除按钮
      console.log(row);

      console.log("this.userform.id",{...row})
      var id=row.id
      console.log("deleteId",id)
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("postid",id)
        this.$http.get('/user/delete',{params:{id:id}}).then(res=>{
          console.log("res",res)
          if (res.data.state==200){ //成功删除弹窗
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.load()
          }
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>
